import { IDomEditor, IModalMenu, SlateNode } from '@wangeditor/editor';
import { createApp, h } from 'vue';
import MediaLibrary from './MediaLibrary.vue';

export class MyModalMenu implements IModalMenu {
  title: string;
  tag: string;
  showModal: boolean;
  modalWidth: number;

  constructor() {
    this.title = '媒体库';
    this.tag = 'button';
    this.showModal = true;
    this.modalWidth = 475;
  }

  isActive(editor: IDomEditor): boolean {
    return true;
  }

  getValue(editor: IDomEditor): string | boolean {
    return '';
  }

  isDisabled(editor: IDomEditor): boolean {
    return false;
  }

  exec(editor: IDomEditor, value: string | boolean) {
    console.log('click MyModalMenu');
  }

  getModalPositionNode(editor: IDomEditor): SlateNode | null {
    return null;
  }

  getModalContentElem(editor: IDomEditor): HTMLElement {
    const $content = document.createElement('div');
    const app = createApp({
      render: () => h(MediaLibrary, { editor })
    });
    const vm = app.mount($content);
    return vm.$el as HTMLElement;
  }
}
